<template>
<div style="width: 1200px;margin: 0 auto">
  <el-carousel>
    <el-carousel-item v-for="item in bannerArr">
      <img :src="item.imgUrl" style="width: 100%"></el-carousel-item>

  </el-carousel>
<!-- 食谱相关开始 -->
  <el-row :gutter="10" style="background-color: white">
   <el-col :span="3">
     <p style="font-size: 28px;margin: 10px">烘焙食谱</p>
   </el-col>
   <el-col :span="21">
      <el-menu @select="handleSelectRecipe" mode="horizontal" default-active="0" active-text-color="orange">
        <el-menu-item index="0">全部</el-menu-item>
        <el-menu-item v-for="c in recipeCategoryArr" :index="c.id">{{c.name}}</el-menu-item>
      </el-menu>
   </el-col>
  </el-row>
<!-- 内容列表开始 -->
  <el-row :gutter="20">
   <el-col :span="6" style="margin-top: 10px" v-for="item in recipeArr">
     <el-card>
       <router-link :to="'/detail?id='+item.id" style="text-decoration: none;color: #333">
         <img :src="BASE_URL+item.imgUrl" style="width: 100%;height: 150px">
         <p style="height: 40px">{{item.title}}</p>
       </router-link>

       <el-row :gutter="10">
        <el-col :span="4">
          <el-avatar :size="30" :src="BASE_URL+item.userImgUrl"></el-avatar>
        </el-col>
        <el-col :span="16"><span style="font-size: 20px">{{item.nickname}}</span></el-col>
        <el-col :span="4">
          <span style="font-size: 16px;color: #666">{{item.categoryName}}</span>
        </el-col>
       </el-row>
     </el-card>
   </el-col>
  </el-row>
  <div style="text-align: center"><el-button @click="router.push('/list?type=1')">点击加载更多</el-button></div>
<!-- 内容列表结束 -->
<!-- 食谱相关结束 -->

  <!-- 视频相关开始 -->
  <el-row :gutter="10" style="margin-top:20px;background-color: white">
    <el-col :span="3">
      <p style="font-size: 28px;margin: 10px">烘焙视频</p>
    </el-col>
    <el-col :span="21">
      <el-menu @select="handleSelectVideo" mode="horizontal" default-active="0" active-text-color="orange">
        <el-menu-item index="0">全部</el-menu-item>
        <el-menu-item v-for="c in videoCategoryArr" :index="c.id">{{c.name}}</el-menu-item>

      </el-menu>
    </el-col>
  </el-row>
  <!-- 内容列表开始 -->
  <el-row :gutter="20">
    <el-col :span="6" style="margin-top: 10px" v-for="item in videoArr">
      <el-card>
        <router-link  :to="'/detail?id='+item.id" style="text-decoration: none;color: #333">
          <img :src="BASE_URL+item.imgUrl" style="width: 100%;height: 150px">
          <p style="height: 40px">{{item.title}}</p>
        </router-link>

        <el-row :gutter="10">
          <el-col :span="4">
            <el-avatar :size="30" :src="BASE_URL+item.userImgUrl"></el-avatar>
          </el-col>
          <el-col :span="16"><span style="font-size: 20px">{{item.nickname}}</span></el-col>
          <el-col :span="4">
            <span style="font-size: 16px;color: #666">{{item.categoryName}}</span>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
  <div style="text-align: center"><el-button @click="router.push('/list?type=2')">点击加载更多</el-button></div>
  <!-- 内容列表结束 -->
  <!-- 视频相关结束 -->

  <!-- 资讯相关开始 -->
  <el-row :gutter="10" style="margin-top:20px;background-color: white">
    <el-col :span="3">
      <p style="font-size: 28px;margin: 10px">行业资讯</p>
    </el-col>
    <el-col :span="21">
      <el-menu @select="handleSelectInfo" mode="horizontal" default-active="0" active-text-color="orange">
        <el-menu-item index="0">全部</el-menu-item>
        <el-menu-item v-for="c in infoCategoryArr" :index="c.id">{{c.name}}</el-menu-item>

      </el-menu>
    </el-col>
  </el-row>
  <!-- 内容列表开始 -->
  <el-row :gutter="20">
    <el-col :span="6" style="margin-top: 10px" v-for="item in infoArr">
      <el-card>
        <router-link  :to="'/detail?id='+item.id" style="text-decoration: none;color: #333">
          <img :src="BASE_URL+item.imgUrl" style="width: 100%;height: 150px">
          <p style="height: 40px">{{item.title}}</p>
        </router-link>

        <el-row :gutter="10">
          <el-col :span="4">
            <el-avatar :size="30" :src="BASE_URL+item.userImgUrl"></el-avatar>
          </el-col>
          <el-col :span="16"><span style="font-size: 20px">{{item.nickname}}</span></el-col>
          <el-col :span="4">
            <span style="font-size: 16px;color: #666">{{item.categoryName}}</span>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
  <div style="text-align: center"><el-button  @click="router.push('/list?type=3')">点击加载更多</el-button></div>
  <!-- 内容列表结束 -->
  <!-- 资讯相关结束 -->
</div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import router from "@/router";


const handleSelectRecipe = (index,indexPath)=>{
    loadContents(1,index);//index就是点击分类的id
}
const handleSelectVideo = (index,indexPath)=>{
  loadContents(2,index);//index就是点击分类的id
}
const handleSelectInfo = (index,indexPath)=>{
  loadContents(3,index);//index就是点击分类的id
}

const recipeCategoryArr = ref([]);
const videoCategoryArr = ref([]);
const infoCategoryArr = ref([]);

const bannerArr = ref([]);
onMounted(()=>{
  //请求轮播图数据
  axios.get(BASE_URL+'/v1/banners').then((response)=>{
    if (response.data.code==2001){
      bannerArr.value = response.data.data;
    }
  })

  //请求三个分类下的二级分类
  axios.get(BASE_URL+'/v1/categories/1').then((response)=>{
    if (response.data.code==2001){
      recipeCategoryArr.value = response.data.data;
    }
  })
  axios.get(BASE_URL+'/v1/categories/2').then((response)=>{
    if (response.data.code==2001){
      videoCategoryArr.value = response.data.data;
    }
  })
  axios.get(BASE_URL+'/v1/categories/3').then((response)=>{
    if (response.data.code==2001){
      infoCategoryArr.value = response.data.data;
    }
  })
  //请求三种类型下的内容列表
  loadContents(1,0);
  loadContents(2,0);
  loadContents(3,0);

  //发请求获取轮播图数据


})
const recipeArr = ref([]);
const videoArr = ref([]);
const infoArr = ref([]);
const loadContents=(type,categoryId)=>{
  axios.get(BASE_URL+'/v1/contents/'+type+'/'+categoryId+'/index')
  .then((response)=>{
    if (response.data.code==2001){
      switch (type) {
          case 1: recipeArr.value=response.data.data;break;
          case 2: videoArr.value=response.data.data;break;
          case 3: infoArr.value=response.data.data;break;
      }
    }
  })
}
</script>

<style scoped>

</style>